<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <style>
        .error{
            color: red;
        }
     body{
         background-color: aliceblue;
         background-image: url("https://img.tukuppt.com/ad_preview/00/23/14/5c9a532b79c71.jpg!/fw/780");
     }
    </style>
</head>
<body>
    <h1 align="center">欢迎注册</h1>
    <form onsubmit="return validateForm()" action="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/login.html"  method="post">
       
        <table border="1" width="650" height="650" cellpadding="10" cellspacing="0" align="center" >
            <tr><td>用户名</td><td> <input type="text" name="name">
                      <span class="error" id="nameErr"></span></td></tr>
            <tr><td>密码</td><td>
              <input type="password" name="pwd">
                      <span class="error" id="pwdErr"></span>
           </td></tr>
            <tr><td>email</td><td><input type="text" name="email">
                      <span class="error" id="emailErr"></span></td></tr>
      
            <tr><td>手机号</td><td><input type="text" name="mobile" maxlength="11">
                      <span class="error" id="mobileErr"></span></td></tr>
      <tr><td>偏爱犬选择</td>
  <td><select id="tx">
    <option value="">-请选择-</option><!--先创建三个下拉栏，分别对应 省 市 县-->
</select>

<select id="zl">
    <option value="">-请选择-</option>
</select>

<select id="sex">
    <option value="">-请选择-</option>
</select></td>
      </tr>
            <tr><td>验证码</td><td><input type="text" name="captcha" maxlength="4"><span id="captcha" onclick="getCaptcha()"></span>
                      <span class="error" id="captchaErr"></span>
             </td></tr>
            <tr><td colspan="2" align="center">
               <input type="submit" value="注册"  >
               
            </td></tr>
          </table>
        
    </form>
    <script>
        var capCode = getCaptcha(); // 生成验证码
        console.log(capCode);
        // 清空 input 标签后的提示信息
        var tags = document.getElementsByTagName('input');
        for (var i = 0; i < tags.length; i++) {
            tags[i].onchange = function(){
                var idname = this.name + "Err";
                document.getElementById(idname).innerHTML = '';
            }
        }
        // 显示错误消息
        function printError(elemId, hintMsg) {
            document.getElementById(elemId).innerHTML = hintMsg;
        }
        // 验证表单数据
        function validateForm() {
            // 获取表单元素的值
            var name = document.querySelector("input[name='name']").value;
            var pwd = document.querySelector("input[name='pwd']").value;
            var email = document.querySelector("input[name='email']").value;
            var mobile = document.querySelector("input[name='mobile']").value;
            var captcha = document.querySelector("input[name='captcha']").value;
                  
            if(name == "" || name == null){
                printError("nameErr", "用户名不能为空");
                return false;
            }
            if(pwd == "" || pwd == null){
                printError("pwdErr", "密码不能为空");
                return false;
            }
            if(email == "" || email == null){
                printError("emailErr", "邮箱不能为空");
                return false;
            } else {
                var regex = /^\S+@\S+\.\S+$/;
                if(regex.test(email) === false) {
                    printError("emailErr", "请输入正确的邮箱地址");
                    return false;
                }
            }
            if(mobile == "" || mobile == null){
                printError("mobileErr", "手机号不能为空");
                return false;
            } else {
                var regex = /^[1]\d{10}$/;
                if(regex.test(mobile) === false) {
                    printError("mobileErr", "您输入的手机号码有误");
                    return false;
                }
            }
            if(captcha == "" || captcha == null){
                printError("captchaErr", "验证码不能为空");
                return false;
            } else {
                console.log(capCode);
                console.log(captcha);
                if(capCode != captcha){
                    printError("captchaErr", "验证码有误");
                    return false;
                }
                
            }
            if(pwd!=""&&email != "" )
            {
               alert("注册成功！确定后跳转至登录页面");
            }
            
          
           
        } 
        // 获取验证码
        function getCaptcha(){
            var cap = Math.floor(Math.random()*10000).toString();
            if(cap.length != 4) cap += "0";
            document.getElementById("captcha").innerHTML = cap;
            return capCode = cap;
        }
        var otx=document.getElementById("tx");
    var ozl=document.getElementById("zl");
    var osex=document.getElementById("sex");

    var arr_tx=["超大型","大型","中型","小型"];

    var arr_zl=[
        ["大丹犬","圣伯纳犬","高加索","中亚牧羊犬"],
        ["金毛猎犬","拉不拉多","哈士奇","德国狼犬"],
        ["喜乐蒂","雪纳瑞","腊肠犬","边境牧羊犬"],
        ["蝴蝶犬","无毛犬","马尔济斯","比熊犬"]
    ];

    var arr_sex=[
            [
                ["公","母"], ["公","母"], ["公","母"], ["公","母"]
            ],
            [
            ["公","母"], ["公","母"], ["公","母"], ["公","母"]
            ],
            [
            ["公","母"], ["公","母"], ["公","母"], ["公","母"]
            ],
            [
            ["公","母"], ["公","母"], ["公","母"], ["公","母"]
            ]
    ];

    var  quanju_arr;//创建一个全局对象，用于存储一个中间数组

    function input_arr(arr,event){//封装一个函数，用于向下拉栏中添加元素
        for(var i=0;i<arr.length;i++){//下拉栏内的元素来源于数组中的元素，遍历数组
            var option=new Option(arr[i],i);//创建Option对象（这个O要大写），存入值
            event.appendChild(option);//把option添加到event对象的末尾
        }
    }

    input_arr(arr_tx,otx);//调用,给省下拉栏添元素

    otx.onchange= function () {//给下拉栏绑定事件（当下拉栏元素改变时执行）
        ozl.options.length=1;//当省下拉栏改变时，清空市的下拉栏内元素
        osex.options.length=1;//当省下拉栏改变时，清空县的下拉栏内元素
        var index=this.value;//每一个option标签都有一个value值索引，获取索引，用于数组中元素的选择
        var arr_zl_next=arr_zl[index];//获取当前选择省的市元素并赋给一个数组
        quanju_arr=arr_sex[index];//获取当前选择省中市的县元素并赋给定义的中间数组
        input_arr(arr_zl_next,ozl);//调用,给市下拉栏添元素
    }

    ozl.onchange= function () {
        osex.options.length=1;
        var index=this.value;
        var arr_sex_next=quanju_arr[index];
        input_arr(arr_sex_next,osex);//调用,给县下拉栏添元素
    }
    </script>
</body>
</html>